<template>
    <div class="game-container">
      <!-- 返回按钮 -->
      <button class="back-button" @click="$router.push('/game')">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>

      <canvas id="planeCanvas" class="game-canvas"></canvas>

      <!-- 操作提示 -->
      <div class="operation-guide">
        <h3>游戏操作</h3>
          <ul>
          <li>W S键: 上下移动飞机</li>
          <li>A D键: 左右移动飞机</li>
          <li>J键: 发射子弹</li>
          <li>P键: 暂停/继续游戏</li>
          <li>回车键: 重新开始游戏</li>
        </ul>
      </div>

      <!-- 暂停遮罩层 -->
      <div class="pause-overlay" v-if="isPaused">
        <div class="pause-content">
          <h2>游戏暂停</h2>
          <p>按 P 键继续游戏</p>
        </div>
      </div>
    </div>
  </template>
  
<script>
import game from '@/utils/planeCanvas.js';
const { startGame, activateGame, endGame, gameState, restartGame, cleanupKeyboardControls } = game;

// 监听游戏状态变化
function setupGameStateListener(vm) {
  const checkState = () => {
    if (vm.isPaused !== game.isPaused || vm.gameOver !== gameState.gameOver) {
      vm.isPaused = game.isPaused;
      vm.gameOver = gameState.gameOver;
    }
  };

  const intervalId = setInterval(checkState, 100);
  return () => clearInterval(intervalId);
}
  
  export default {
    name: 'PlanePlay',
    data() {
      return {
        isPaused: false,
        gameOver: false
      }
    },
    mounted() {
      // 当组件挂载时启动游戏
      startGame();
      // 激活游戏（开始生成敌机）
      activateGame();
    },
    beforeUnmount() {
      // 当组件卸载时停止游戏
      endGame();
      // 清理键盘事件监听
      cleanupKeyboardControls();
      // 取消监听
      if (this.gameStateWatcher) {
        this.gameStateWatcher();
      }
    },
    created() {
      // 初始化游戏状态
      this.isPaused = game.isPaused;
      this.gameOver = gameState.gameOver;
      // 设置游戏状态监听器
      this.gameStateWatcher = setupGameStateListener(this);
    },
    methods: {
      // 游戏状态同步方法
      syncGameState() {
        this.isPaused = isPaused;
        this.gameOver = gameState.gameOver;
      },
    }
  }
  </script>
  
  <style scoped>
  .game-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #272626;
    position: relative;
    overflow: hidden;
  }

  .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
  }

  .back-button:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
  }

  .operation-guide {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px;
    border-radius: 10px;
    max-width: 200px;
    z-index: 100;
  }

  .operation-guide h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
  }

  .operation-guide ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .operation-guide li {
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .game-canvas {
    width: 100%;
    height: 100%;
  }

  .pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
  }

  .pause-content {
    text-align: center;
    color: white;
  }

  .pause-content h2 {
    font-size: 36px;
    margin-bottom: 15px;
  }

  .pause-content p {
    font-size: 18px;
    opacity: 0.8;
  }
  </style>